<template>
  <div>
    <el-form :model="dataForm" :rules="dataRules" ref="dataForm" label-width="130px">
      <div class="seciont-1">新增合伙人账单</div>
      <el-form-item label="账单名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="账单名称"></el-input>
      </el-form-item>
      <el-form-item label="费用" prop="money">
        <el-input v-model="dataForm.money" placeholder="费用"></el-input>
      </el-form-item>
      <el-col :span="20">
        <el-form-item label="账单类型" prop="billType">
          <el-select v-model="dataForm.billType" placeholder="账单类型" clearable :disabled="isEdit">
            <el-option v-for="(item, index) in billTypeList" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="账期类型" prop="timeType">
          <el-select v-model="dataForm.timeType" placeholder="账期类型" clearable>
            <el-option v-for="(item, index) in timeTypeList" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="合伙人" prop="partnerId">
          <el-select v-model="dataForm.partnerId" placeholder="合伙人" clearable :disabled="isEdit" @change="selectChanged">
            <el-option v-for="(item, index) in partnerIdList" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item></el-col>
      <el-col :span="20">
        <el-form-item label="发货单" prop="applyChargingIds">
          <el-select v-model="dataForm.applyChargingIds" multiple placeholder="请选择发货单" clearable :disabled="isEdit">
            <el-option v-for="(item, index) in applyChargingIdsList" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item></el-col>
      <el-col :span="20">
        <el-form-item>
          <div style="display: flex; justify-content: center;">
            <el-button type="primary" @click.stop="save" :loading="loading">确定</el-button>
            <el-button type="primary" @click.stop="back">取消</el-button>
          </div>
        </el-form-item></el-col>
    </el-form>
  </div>
</template>

<script>
import picUpload from '@/components/pic-upload/index.vue'
import MulPicUpload from '@/components/mul-pic-upload'
export default {
  name: 'addPartnerBill',
  components: {
    picUpload,
    MulPicUpload
  },
  data() {
    return {
      loading: false,
      isEdit: '',
      dataForm: {
        id: '',
        money: '',
        name: '',
        billType: '',
        partnerId: '',
        timeType: '',
        applyChargingIds: []
      },
      partnerIdList: [],

      dataRules: {
        money: [
          { required: true, message: '费用不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '账单名称不能为空', trigger: 'blur' }
        ],
        partnerId: [
          { required: true, message: '合伙人不能为空', trigger: 'blur' }
        ],
        timeType: [
          { required: true, message: '账期类型不能为空', trigger: 'blur' }
        ],
        applyChargingIds: [],
        billType: [
          { required: true, message: '账单类型不能为空', trigger: 'blur' }
        ],
      },
      options: [],
      props: {
        checkStrictly: true,
        label: 'name',
        value: 'id',
        children: 'childs'
      },
      applyChargingIdsList: [],
      billTypeList: [
        {
          label: '合伙人设备服务费账单',
          value: 0
        },
        {
          label: '默认账单',
          value: 1
        }
      ],
      timeTypeList: [
        { label: '按日支付', value: 0 }, { label: '按月支付', value: 1 }
      ],

    }
  },
  watch: {
    isEdit(newVal) {
      this.dataRules.applyChargingIds = newVal ? [] : [
        { required: true, message: '发货单不能为空', trigger: 'blur' }
      ];
    },
  },
  mounted() {
    this.dataForm.id = this.$route.query.id
    this.isEdit = this.$route.query.id == null ? false : true
    console.log("isEdit", this.isEdit)
    this.getPartnerIdList()
    // if (!this.isEdit) {
    //   this.getApplyChargingIds()
    // }
    if (this.dataForm.id) {
      this.getPartnerBillDetail(this.dataForm.id)
      this.getApplyChargingIds(this.dataForm.partnerId)
    }
  },
  methods: {
    back() {
      this.$router.back(-1)
    },

    selectChanged() {
      this.getApplyChargingIds()
    },

    getPartnerBillDetail(id) {
      this.$http({
        url: this.$http.adornUrl('/v1/partner/bill/detail'),
        method: 'get',
        params: this.$http.adornParams({
          id: id
        })
      }).then(({ data }) => {
        this.dataForm = data.data
        this.dataForm.money = data.data.partnerDeviceBillParamVo.money
        this.dataForm.timeType = data.data.partnerDeviceBillParamVo.timeType
        console.log(this.dataForm)
      })
    },
    getPartnerIdList() {
      this.$http({
        url: this.$http.adornUrl('/v1/merchant/partner/list'),
        method: 'get',
        params: this.$http.adornParams({
          current: 1,
          size: 100000
        })
      }).then(({ data }) => {
        console.log(data)
        this.partnerIdList = data.data.records.map(item => {
          return {
            label: item.realName,
            value: item.id
          }
        })
      })
    },
    getApplyChargingIds() {
      this.$http({
        url: this.$http.adornUrl('/v1/apply/charging/list'),
        method: 'get',
        params: this.$http.adornParams({
          partnerId: this.dataForm.partnerId,
          current: 1,
          size: 100000
        })
      }).then(({ data }) => {
        console.log(data)
        this.applyChargingIdsList = data.data.applyChargingDtoIPage.records.map(item => {
          return {
            label: '(' + item.receiver + ')' + item.sn,
            value: item.id
          }
        })
      })
    },

    save() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http({
          url: this.$http.adornUrl(this.dataForm.id ? '/v1/partner/bill/update' : '/v1/partner/bill/add'),
          method: 'post',
          data: this.$http.adornData(this.dataForm)
        }).then(({ data }) => {
          this.loading = false
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.back()
            }
          })
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.seciont-1 {
  padding: 0px 0px 15px 0px;
  margin-bottom: 12px;
  color: #333333;
  font-weight: bold;
  border-bottom: solid 1px #DADADA;
}

.el-form .el-input {
  position: relative;
  width: 40%
}

.el-select {
  width: 200px !important;
}


.el-form-item__label {
  width: 130px;
}

.el-form-item__content {
  width: calc(100% - 130px);
}
</style>
